<style lang="scss" scoped>

$max-width: 1170px;

::v-deep .el-dialog__body {
  padding-top: 0;
}

::v-deep .el-form {

  margin-bottom: 50px;

  .group {
    max-width: $max-width;
    margin-top: 50px;

    .title {
      position: relative;
      margin-bottom: 30px;
      z-index: 1;

      span {
        margin-left: 20px;
        padding: 0 5px;
        font-size: 16px;
        color: #999;
        background-color: #fff;
      }

      &::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #efefef;
        z-index: -1;
      }
    }
  }

  .el-input,
  .el-switch {
    width: 180px;
  }

  .brand-info {
    display: flex;
    flex-direction: row;
    .el-form-item {
      p {
        margin: 0;
        padding: 0;
        width: 100px;
      }
    }
  }
}

.dialog-footer {
  position: fixed;
  bottom: 0;
  left: 0;

  width: calc(100vw - 30px);

  .dialog-footer-inner {

    padding: 20px 0;
    max-width: $max-width;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

  }

  background-color: #fff;

  z-index: 100;

  .el-button {
    width: 100px;
  }
}

.component {
  margin-top: 50px;
  text-align: left;
}

.input-select {

  .el-select {
    ::v-deep {
      .el-input,
      input {
        width: 90px;
      }
    }
  }
}

</style>

<template>
  <el-dialog
    :title="`${status === 'create' ? '新增' : '编辑'}商品`"
    :visible.sync="showDialog"
    :fullscreen="true"
    :close-on-click-modal="false"
    @close="$emit('update:visible', false)"
  >
    <el-form :model="form" label-width="180px">

      <el-card class="group">
        <p class="title">
          <span>商品信息</span>
        </p>

        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="商品条码">
              <el-input v-model="form.barcode" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="商品简称">
              <el-input v-model="form.name_short" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="源地商品名称">
              <el-input v-model="form.name_source" style="width: 100%;" />
            </el-form-item>
          </el-col>

          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="商品中文名称">
              <el-input v-model="form.name_zh" style="width: 100%;" />
            </el-form-item>
          </el-col>

          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="商品英文名称">
              <el-input v-model="form.name_en" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="选择品牌">
          <SearchBrand @select="selectBrand" />
        </el-form-item>

        <div class="brand-info">
          <el-form-item label="品牌ID:">
            <p>{{ form.brand_id && form.brand_id !== '' ? form.brand_id : '空' }}</p>
          </el-form-item>

          <el-form-item label="品牌名（中文）:">
            <p>{{ form.brand_zh && form.brand_zh !== '' ? form.brand_zh : '空' }}</p>
          </el-form-item>

          <el-form-item label="品牌名（英文）:">
            <p>{{ form.brand_en && form.brand_en !== '' ? form.brand_en : '空' }}</p>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="group">

        <p class="title">
          <span>单位信息</span>
        </p>

        <el-row :gutter="10">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第一法定数量">
              <div class="input-select">
                <el-input v-model="form.first_num">
                  <el-select slot="append" v-model="form.first_unit" filterable placeholder="请选择">
                    <el-option v-for="(item) in unit" :key="item.code" :label="`${item.title} ${item.code}`" :value="item.code" />
                  </el-select>
                </el-input>
              </div>
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第二法定数量">
              <div class="input-select">
                <el-input v-model="form.second_num">
                  <el-select slot="append" v-model="form.second_unit" filterable placeholder="请选择">
                    <el-option v-for="(item) in unit" :key="item.code" :label="`${item.title} ${item.code}`" :value="item.code" />
                  </el-select>
                </el-input>
              </div>
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="申报单位">
              <el-select v-model="form.declare_unit" filterable placeholder="请选择">
                <el-option v-for="(item) in unit" :key="item.code" :label="`${item.title} ${item.code}`" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="商品单位">
              <el-select v-model="form.goods_unit" filterable placeholder="请选择">
                <el-option v-for="(item) in unit" :key="item.code" :label="`${item.title} ${item.code}`" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>

      <el-card class="group">

        <p class="title">
          <span>商品规格</span>
        </p>

        <el-row :gutter="10">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="净重">
              <el-input v-model="form.suttle_weight">
                <template slot="append">克</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="毛重">
              <el-input v-model="form.gross_weight">
                <template slot="append">克</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="商品规格">
              <el-input v-model="form.spec" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="原产国">
              <el-input v-model="form.place_of_origin" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="套装">
              <el-switch v-model="form.is_package" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>

      <el-card class="group">

        <p class="title">
          <span>国别代码</span>
        </p>

        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="选择国家">
              <el-select v-model="form.send_code" placeholder="" @change="countryChanged">
                <el-option
                  v-for="item in country"
                  :key="item.country_id"
                  :label="item.country_name"
                  :value="item.country_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="country-code">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="国别代码（起运国或地区）" label-width="260px">
              <span>{{ form.send_code }}</span>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="国别代码的英文简称（起运国或地区）" label-width="260px">
              {{ form.send_en_form }}
            </el-form-item>
          </el-col>

        </el-row>

      </el-card>

      <el-card class="group">

        <p class="title">
          <span>售价相关</span>
        </p>

        <el-row :gutter="10">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="当地售价">
              <el-input v-model="form.source_price" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="商品参考地址">
              <el-input v-model="form.url" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="个人完税税号（行邮税号）">
              <el-cascader
                v-model="form.tax_code"
                :options="tariffList"
                :props="{ label: 'name', value: 'tax_code', checkStrictly: true, emitPath: false }"
                filterable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="完税价格">
              <el-input v-model="form.dutiable_value" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="税率">
              <el-input v-model="form.tax_rate" />
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="内置数量">
              <el-input v-model="form.contain_number" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>

      <el-card class="group component">

        <p class="title">
          <span>成分含量</span>
        </p>

        <el-form-item label="成分含量（中文）" label-width="150px">
          <el-input v-model="form.component_zh" type="textarea" rows="5" style="width: 770px;" />
        </el-form-item>

        <el-form-item label="成分含量（英文）" label-width="150px">
          <el-input v-model="form.component_en" type="textarea" rows="5" style="width: 770px;" />
        </el-form-item>

        <el-form-item label="成分含量（当地）" label-width="150px">
          <el-input v-model="form.component_source" type="textarea" rows="5" style="width: 770px;" />
        </el-form-item>
      </el-card>

      <div class="dialog-footer">
        <div class="dialog-footer-inner">
          <div />
          <div class="buttons">
            <el-button @click="showDialog = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </div>
      </div>

    </el-form>

  </el-dialog>
</template>

<script>

import _ from 'lodash'

import { handleAdd, handleEdit } from '@/api/base/product'
import { listsArea } from '@/api/tariff'

import SearchBrand from '@/components/Template/Product/SearchBrand'

export default {

  components: {
    SearchBrand
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: 'create'
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {

      showDialog: this.visible,

      brand: {
        value: '',
        condition: 'brand_name',
        loading: false,
        options: []
      },

      /**
       * 正在搜索
       */
      searching: false,

      tariffList: [],

      country: [],
      unit: [],

      form: {
        barcode: '',
        name_source: '',
        name_zh: '',
        name_en: '',
        name_short: '',
        spec: '',
        declare_unit: '',
        first_unit: null,
        first_num: null,
        second_unit: null,
        second_num: null,
        goods_unit: '',
        suttle_weight: 0,
        gross_weight: 0,
        declare_price: '0.00',
        source_price: null,
        place_of_origin: '',
        send_code: '',
        send_en_form: '',
        status: 1,
        url: null,
        tax_code: '',
        hs_code: null,
        dutiable_value: '0.00',
        tax_rate: '0.00',
        contain_number: 0,
        brand_id: null,
        component_zh: '',
        component_en: null,
        component_source: null,
        brand_zh: null,
        brand_en: null,
        is_package: 0
      }
    }
  },

  async created() {
    // 更新时 将 form 替换为 原有的信息
    if (this.status === 'update') {
      this.form = this.data
    }

    listsArea({
      pid: 0,
      page: 0,
      name: ''
    }).then(res => {
      this.tariffList = res.data
    })

    this.country = await this.$store.dispatch('app/getCountry')
    this.unit = await this.$store.dispatch('app/getUnit')
  },

  methods: {

    selectBrand(brandInfo) {
      if (!brandInfo) {
        this.form.brand_id = null
        this.form.brand_zh = null
        this.form.brand_en = null
        return
      }

      this.form.brand_id = brandInfo.brand_id
      this.form.brand_zh = brandInfo.brand_name
      this.form.brand_en = brandInfo.brand_en_name
    },

    countryChanged(val) {
      const country = _.find(this.country, { country_id: val })
      this.form.send_en_form = country.country_code
    },

    submit() {
      const request = this.status === 'create' ? handleAdd : handleEdit

      request(this.form).then(res => {
        this.form.brand.brand_name = this.form.brand_zh
        this.form.brand.brand_en_name = this.form.brand_en

        this.$message.success(res.msg)
        this.showDialog = false
      })
    }
  }
}
</script>
